html {
    height: 100%;
}

body {
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.app {
    $solidBorder: 1px solid #eee;
    $sideCollapsedWidth: 66px;
    $sideExpandedWidth: 230px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
        sans-serif;
    font-size: 1em;
    width: 100%;
    height: 100%;
    min-width: 900px;
    border: $solidBorder;
    display: flex;
    display: -webkit-flex;
    flex-flow: row nowrap;
    &-side {
        width: 230px;
        height: 100%;
        font-weight: 700;
        border-right: $solidBorder;
        &-left {
            background-color: rgb(238, 241, 246);
        }
        &-logo {
            height: 60px;
            text-align: center;
        }
        &-collapsed {
            width: 66px !important;
        }
        &-expanded {
            width: 230px !important;
        }
    }
    &-header {
        width: 100%;
        height: 60px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        border-bottom: $solidBorder;
        &-userinfo {
            position: absolute;
            right: 0;
            margin-right: 25px;
            display: flex;
            flex-flow: row nowrap;
            height: 60px;
            justify-content: flex-start;
            align-items: center;
        }
    }
    &-body {
        font-size: 1em;
        width: 100%;
        height: 100%;
        padding: 20px;
        overflow-y: scroll;
    }
    &-footer {
        width: 100%;
        height: 60px;
    }
}

.inline-block {
    display: inline-block;
}

.el-menu-item.is-active {
    background: #fff !important;
}

.app-body {
    line-height: 28px !important;
}
